{% extends 'base.html' %}
{% load static %}

{% block head %}
<link rel="stylesheet" href="{% static 'css/global/list.css' %}?v=2">
<link rel="stylesheet" href="{% static 'css/admin_menu/admin.css' %}?v=2">
{% if user.role == "Администратор" %}
<title>Администрирование</title>
{% else %}
<title>Who?</title>
{% endif %}
{% endblock head %}

{% block content %}
{% if user.role == "Администратор" %}

<form method="GET" class="filters" id="filter">
    <input type="hidden" name="search_names" class="filters-search-input" >
    {% if name_have %}
        <input type="hidden" name="search_names" class="filters-search-input" value="{{ name }}">
    {% else %}
        <input type="hidden" name="search_names" class="filters-search-input" >
    {% endif %}
    {% csrf_token %}
    <div class="filters-btns">
        <button type="button" class="filters-btn-open" onclick="n_user()">
            Новый пользователь
            <svg class="filters-btn-open-plus" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="m114 100 49-49a9.9 9.9 0 0 0-14-14l-49 49-49-49a9.9 9.9 0 0 0-14 14l49 49-49 49a9.9 9.9 0 0 0 14 14l49-49 49 49a9.9 9.9 0 0 0 14-14Z"
                    fill="inherit"></path>
            </svg>
        </button>
        <button type="button" class="filters-btn-open" onclick="token_open()">
            Создать токены
        </button>
    </div>
    <div class="filters-heading">
        <h2 class="filters-title">Фильтры</h2>
        <a href="#" class="filters-link">очистить</a>
    </div>
    <div class="filters-div">
        <button type="button" class="filters-top" onclick="filters_open(this)">
            <h3 class="filters-name">Группа</h3>
            <div class="filters-svg svg-hidden">
                <svg width="16" height="16" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="m114 100 49-49a9.9 9.9 0 0 0-14-14l-49 49-49-49a9.9 9.9 0 0 0-14 14l49 49-49 49a9.9 9.9 0 0 0 14 14l49-49 49 49a9.9 9.9 0 0 0 14-14Z"
                        fill="#5A88FF"></path>
                </svg>
            </div>
        </button>
        <div class="filters-content list-hidden">
            <div class="filters-item filters-search">
                <input type="text" class="filters-input" placeholder="Поиск" onkeyup="filters_search(this)">
                <div class="filters-clear" onclick="filters_clear(this)"></div>
            </div>
            <ul class="filters-list">
                {% for group in all_groups %}
                    <li class="filters-item">
                        <label class="filters-label">
                            <input type="checkbox" class="filters-checkox" value={{group}}
                            name="group" {% if group in groups %} checked {%endif%}>
                            <span class="filters-custom-checkbox" ></span>
                            <p class="filters-text">{{group}} группа</p>
                        </label>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="filters-div">
        <button type="button" class="filters-top" onclick="filters_open(this)">
            <h3 class="filters-name">Роль</h3>
            <div class="filters-svg svg-hidden">
                <svg width="16" height="16" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="m114 100 49-49a9.9 9.9 0 0 0-14-14l-49 49-49-49a9.9 9.9 0 0 0-14 14l49 49-49 49a9.9 9.9 0 0 0 14 14l49-49 49 49a9.9 9.9 0 0 0 14-14Z"
                        fill="#5A88FF"></path>
                </svg>
            </div>
        </button>
        <div class="filters-content list-hidden">
            <ul class="filters-list">
                <li class="filters-item">
                    <label class="filters-label">
                        <input type="checkbox" class="filters-checkox" value="Ученик"
                        name="role" {% if "Ученик" in roles %} checked {%endif%}>
                        <span class="filters-custom-checkbox"></span>
                        <p class="filters-text">Ученик</p>
                    </label>
                </li>
                <li class="filters-item">
                    <label class="filters-label">
                        <input type="checkbox" class="filters-checkox" value="Учитель"
                        name="role" {% if "Учитель" in roles %} checked {%endif%}>
                        <span class="filters-custom-checkbox"></span>
                        <p class="filters-text">Учитель</p>
                    </label>
                </li>
                <li class="filters-item">
                    <label class="filters-label">
                        <input type="checkbox" class="filters-checkox" value="Администратор"
                        name="role" {% if "Администратор" in roles %} checked {%endif%}>
                        <span class="filters-custom-checkbox"></span>
                        <p class="filters-text">Администратор</p>
                    </label>
                </li>
            </ul>
        </div>
    </div>
    <button type="submit" class="filters-btn">Применить</button>
</form>

<div class="content">
    <div class="main-nav">
        
        <input class="search-input" type="text" placeholder="Поиск по пользователям" name="search_names" oninput="search_input_update(this)" {% if name_have %} value="{{name}}" {% endif%}>
        <button class="search-button" form="filter">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                            d="M17.6339 15.8664L14.4607 12.6932C15.1164 11.7051 15.5001 10.522 15.5001 9.25006C15.5001 5.80378 12.6964 3 9.25006 3C5.80378 3 3 5.80378 3 9.25006C3 12.6964 5.80378 15.5001 9.25006 15.5001C10.522 15.5001 11.7051 15.1164 12.6932 14.4607L15.8664 17.6339C16.3539 18.122 17.1464 18.122 17.6339 17.6339C18.122 17.1458 18.122 16.3545 17.6339 15.8664ZM4.87502 9.25006C4.87502 6.83754 6.83754 4.87502 9.25006 4.87502C11.6626 4.87502 13.6251 6.83754 13.6251 9.25006C13.6251 11.6626 11.6626 13.6251 9.25006 13.6251C6.83754 13.6251 4.87502 11.6626 4.87502 9.25006Z"
                            fill="#5a88ff" />
            </svg>
        </button>
    </div>
    <div class="table-div">
        <div class="table-div-div">
            <table class="table">
                <tbody class="tbody">
                    <tr class="table-names">
                        <td>ID</td>
                        <td class="table-username">ФИО</td>
                        <td class="table-group">Группа</td>
                        <td class="table-role">Роль</td>
                        <td>Логин</td>
                        <td>Эл. Почта</td>
                        <td class="func">Действия</td>
                    </tr>
                    {% for user in users %}
                    {% if user.deactivate %}
                    <tr class="table-user deactive-user">
                        <td>{{ user.id }}</td>
                        <td>
                            <span class="surname">{{ user.last_name }}</span>
                            <span class="name">{{ user.first_name }}</span>
                            <span class="patronymic">{{ user.middle_name }}</span>
                        </td>
                        <td class="table-td-group">
                            {% if user.role == "Ученик" %}
                            {{ user.group }}
                            {% endif %}
                        </td>
                        <td>{{ user.role }}</td>
                        <td>{{ user.username }}</td>
                        <td>{{ user.email }}</td>
                        <td class="table-hidden">{{ user.password }}</td>
                        <td class="func">
                            <button class="delete table-btn"></button>
                        </td>
                    </tr>
                    {% else %}
                    <tr class="table-user">
                        <td>{{ user.id }}</td>
                        <td>
                            <span class="surname">{{ user.last_name }}</span>
                            <span class="name">{{ user.first_name }}</span>
                            <span class="patronymic">{{ user.middle_name }}</span>
                        </td>
                        <td class="table-td-group">
                            {% if user.role == "Ученик" %}
                            {{ user.group }}
                            {% endif %}
                        </td>
                        <td>{{ user.role }}</td>
                        <td>{{ user.username }}</td>
                        <td>{{ user.email }}</td>
                        <td class="table-hidden">{{ user.password }}</td>
                        <td class="func">
                            <button class="change table-btn"></button>
                            <button class="delete table-btn"></button>
                        </td>
                    </tr>
                    {% endif %}
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    <div class="pages">
        <ul class="pages-list">
            {% if have_prev_page %}
            <li class="pages-item">
                <form method="GET">
                    {% if name_have %}
                        <input type="hidden" name="search_names" value="{{name}}">
                    {% endif %}
                    {% if role_have %}
                        {% for role in roles%}
                            <input type="hidden" name="role" value="{{role}}">
                        {% endfor %}
                    {% endif %}
                    {% if group_have %}
                        {% for group in groups%}
                            <input type="hidden" name="group" value="{{group}}">
                        {% endfor %}
                    {% endif %}
                    <input type="hidden" name="p" value="{{ prev_page }}">
                    <button type="submit" class="pages-btn" name="page_number">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="20px" height="20px">
                        <g data-name="Layer 2">
                            <path
                                d="M20,25a1,1,0,0,1-.71-.29l-8-8a1,1,0,0,1,0-1.42l8-8a1,1,0,1,1,1.42,1.42L13.41,16l7.3,7.29a1,1,0,0,1,0,1.42A1,1,0,0,1,20,25Z" />
                        </g>
                        <g>
                            <rect height="32" width="32" fill="none" />
                        </g>
                    </svg>
                    </button>
                </form>
            </li>
            {% endif %}
            {% for p in paginator.page_range %}
            <li class="pages-item">
                <form method="GET">
                    {% if name_have %}
                        <input type="hidden" name="search_names" value="{{name}}">
                    {% endif %}
                    {% if role_have %}
                        {% for role in roles%}
                            <input type="hidden" name="role" value="{{role}}">
                        {% endfor %}
                    {% endif %}
                    {% if group_have %}
                        {% for group in groups%}
                            <input type="hidden" name="group" value="{{group}}">
                        {% endfor %}
                    {% endif %}
                    <input type="hidden" name="p" value="{{ p }}">
                {% if p == page_number %}
                    <button type="submit" class="page-active" name="page_number">{{ p }}</button>
                {% else %}
                    <button type="submit" class="pages-btn" name="page_number">{{ p }} </button>
                {% endif %}
                </form>
            </li>
            {% endfor %}
            {% if have_next_page %}
            <li class="pages-item">
                <form method="GET">
                    {% if name_have %}
                        <input type="hidden" name="search_names" value="{{name}}">
                    {% endif %}
                    {% if role_have %}
                        {% for role in roles%}
                            <input type="hidden" name="role" value="{{role}}">
                        {% endfor %}
                    {% endif %}
                    {% if group_have %}
                        {% for group in groups%}
                            <input type="hidden" name="group" value="{{group}}">
                        {% endfor %}
                    {% endif %}
                    <input type="hidden" name="p" value="{{ next_page }}">
                    <button type="submit" class="pages-btn" name="page_number">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="20px" height="20px"
                        style="transform: rotate(180deg);">
                        <g data-name="Layer 2">
                            <path
                                d="M20,25a1,1,0,0,1-.71-.29l-8-8a1,1,0,0,1,0-1.42l8-8a1,1,0,1,1,1.42,1.42L13.41,16l7.3,7.29a1,1,0,0,1,0,1.42A1,1,0,0,1,20,25Z" />
                        </g>
                        <g>
                            <rect height="32" width="32" fill="none" />
                        </g>
                    </svg> 
                    </button>
                </form>
            </li>
            {% endif %}
        </ul>
    </div>
</div>

<form class="new-user-block" method="POST" id="form" action="{% url 'admin_menu' %}">
    {% csrf_token %}
    <p class="new-user-p">Создание пользователя</p>
    <div class="new-user-main">
        <div class="inputs">
            {% csrf_token %}
            <input class="input input-surname" type="text" placeholder="Фамилия" name="surname_input" required>
            <input class="input input-name" type="text" placeholder="Имя" name="name_input" required>
            <input class="input input-patronymic" type="text" placeholder="Отчество" name="patronymic_input" required>
            <input class="input input-login" type="text" placeholder="Логин" name="login_input" required>
            <input class="input input-email" type="email" placeholder="Email" name="email_input" required>
            <input type="text" class="input input-password" placeholder="Пароль" name="password_input">
            <input type="number" class="form-id" name="user_id_edit" required>
            <input type="text" class="form-group" value="1" name="group_input" required>
        </div>
        <div class="lists">
            <div class="new-user-role">
                <div>
                    <label class="role-name" for="role1">Ученик</label>
                    <input class="input-role" type="radio" name="role" id="role1" value="Ученик" checked>
                </div>
                <div>
                    <label class="role-name" for="role2">Учитель</label>
                    <input class="input-role" type="radio" name="role" id="role2" value="Учитель">
                </div>
                <div>
                    <label class="role-name" for="role3">Админ</label>
                    <input class="input-role" type="radio" name="role" id="role3" value="Администратор">
                </div>
            </div>

            <div class="new-user-group">
                <p class="list-name">Группа:</p>
                <div class="list-names">
                    <p class="list-p n-hidden" id="group-p">1</p>
                    <ul class="list" id="group-list">
                        <li class="list-li form-li">1</li>
                        <li class="list-li form-li">2</li>
                        <li class="list-li form-li">3</li>
                        <li class="list-li form-li">4</li>
                        <li class="list-li form-li">5</li>
                        <li class="list-li form-li">6</li>
                        <li class="list-li form-li">7</li>
                        <li class="list-li form-li">10</li>
                        <li class="list-li form-li">11</li>
                        <li class="list-li form-li">12</li>
                        <li class="list-li form-li">13</li>
                        <li class="list-li form-li">14</li>
                        <li class="list-li form-li">15</li>
                        <li class="list-li form-li">16</li>
                        <li class="list-li form-li">17</li>
                        <li class="list-li form-li">20</li>
                        <li class="list-li form-li">21</li>
                        <li class="list-li form-li">22</li>
                        <li class="list-li form-li">23</li>
                        <li class="list-li form-li">24</li>
                        <li class="list-li form-li">25</li>
                        <li class="list-li form-li">26</li>
                        <li class="list-li form-li">27</li>
                    </ul>
                    <div class="block"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="new-user-btns">
        <button class="btn exit" onclick="exit()" type="button">Отмена</button>
        <button class="btn create" onclick="create()" type="submit">Создать</button>
    </div>
</form>

<form class="delete_page" method="POST">
    <p class="delete-p">Вы уверены, что хотите удалить/скрыть пользователя?</p>
    <p>Пользователь: <span class="delete-fio"></span></p>
    <div class="delete-btns">
        <button class="btn exit" type="button" onclick="del_exit()">Отмена</button>
        <input class="btn delete-btn" type="submit" name="delete_butt" value="Удалить">
        <input class="btn delete-btn del-btn" type="submit" name="deactivate_butt" value="Скрыть">
        {% csrf_token %}
        <input type="number" class="user-id" name="user_id_delete">
    </div>
</form>

<form class="create-tokens" method="POST">
    <p class="token-p">Создание токенов</p>
    <span class="token-span">Напишите в поле количество токенов, которое хотите создать.</span>
    {% csrf_token %}
    <input type="number" class="token-input" name="token_value" min="1" max="1000" required />

    <div class="token-role">
        <div>
            <label class="role-name" for="token-role1">Ученик</label>
            <input class="input-role" type="radio" name="token_role" id="token-role1" value="Ученик" checked>
        </div>
        <div>
            <label class="role-name" for="token-role2">Учитель</label>
            <input class="input-role" type="radio" name="token_role" id="token-role2" value="Учитель">
        </div>
    </div>

    <div class="token-btns">
        <button class="btn exit" type="button" onclick="tok_exit()">Отмена</button>
        <input class="btn btn-token-create" type="submit" name="accept_token" onclick="tok_exit()">
    </div>
</form>

<div class="back-form"></div>

<script>
    let height = document.querySelector('.table').scrollHeight;
    console.log(height);
    document.querySelector('.table-div').style.height = height + 10 + 'px';
</script>

<script src="{% static 'js/admin_menu/admin.js' %}?v=1"></script>
<script src="{% static 'js/global/list.js' %}?v=1"></script>

{% else %}
<div class="div-error">
    <p class="hi">Йоу, мэн, ты не админчик?</p>
    <img src="{% static 'img/global/not_authorized.jpg' %}" alt="Балакин...">
    <p class="advice-p">Иди попроси админку, а потом приходи</p>
    <a href="{% url 'profile' %}">В профиль</a>
</div>
{% endif %}

{% endblock content %}